Ext.define('Intranet.Desktop.view.InstalledModules', {
    extend: 'Ext.tab.Panel',
    
    alias: 'widget.installedModules',
    
    id: 'installed-modules',
    
    width: 600,
    height: 400,
    activeTab: 0,
    tabPosition: 'bottom',
    
    listeners: {
        
        afterrender: function(e, eOpts){ //e is this
            
            //Load Install modules
            var modulesStore = Ext.create('Intranet.Desktop.store.InstalledModulesStore');

            var installedDataView = Ext.create('Ext.view.View', {
                    store: modulesStore,
                    tpl: '<tpl for=".">' +
                            '<div class="module-wrapper">' +
                                    '<span class="name">{name}</span>' +
                            '</div>' +
                    '</tpl>',
                    itemSelector: 'div.module-wrapper',
                    selectedItemCls: 'module-selected', 
                    emptyText: '',
                    deferEmptyText: false,
                    id: 'installedView'                      
            });

            Ext.getCmp('installedModulesPanel').add(installedDataView);
            
            //Load disabled modules
            var modulesStore = Ext.create('Intranet.Desktop.store.DisabledModulesStore');

            var disabledDataView = Ext.create('Ext.view.View', {
                    store: modulesStore,
                    tpl: '<tpl for=".">' +
                            '<div class="module-wrapper">' +
                                    '<span class="name">{name}</span>' +
                            '</div>' +
                    '</tpl>',
                    itemSelector: 'div.module-wrapper',
                    selectedItemCls: 'module-selected', 
                    emptyText: '',
                    deferEmptyText: false,
                    id: 'disabledView'

            });

            Ext.getCmp('disableModulesPanel').add(disabledDataView);
        },
                
        tabchange: function(tabPanel, newCard, oldCard, eOpts )
        {
            if(newCard.getId() ===  'installedModulesPanel') 
            {
                var modulesStore = Ext.create('Intranet.Desktop.store.InstalledModulesStore');
                Ext.getCmp('installedView').bindStore(modulesStore);
            }
            else if(newCard.getId() ===  'disableModulesPanel') 
            {
                var modulesStore = Ext.create('Intranet.Desktop.store.DisabledModulesStore');
                Ext.getCmp('disabledView').bindStore(modulesStore);
            }
        },
                
        scope: this
        
    },
            
    
        
    items: [{
            
            title: 'Installed Modules',
            id: 'installedModulesPanel',
            bodyPadding: 10,
            rbar: ['->', {
                    xtype: 'button',
                    text: 'Hide',
                    id: 'installedHideBtn',
                    border: 5,
                    style: {
                        borderColor: '#669999',
                        borderStyle: 'solid',
                        marginTop: 5
                    }
            }, {
                
                    xtype: 'button',
                    text: 'Disable',
                    id: 'installedDisableBtn',
                    border: 5,
                    style: {
                        borderColor: '#669999',
                        borderStyle: 'solid',
                        marginTop: 5
                    }
            }, {
                    xtype: 'button',
                    text: 'Remove',
                    id: 'installedRemoveBtn',
                    border: 5,
                    style: {
                        borderColor: '#669999',
                        borderStyle: 'solid',
                        marginTop: 5,
                        marginBottom: 5
                    }
                    
            }]
    }, {
            title: 'Disabled Modules',
            id: 'disableModulesPanel',
            bodyPadding: 10,
            rbar: ['->', {
                
                    xtype: 'button',
                    id: 'disabledEnableBtn',
                    text: 'Enable',
                    border: 5,
                    style: {
                        borderColor: '#669999',
                        borderStyle: 'solid',
                        marginTop: 5
                    }
            }, {
                
                    xtype: 'button',
                    text: 'Remove',
                    id: 'disabledRemoveBtn',
                    border: 5,
                    style: {
                        borderColor: '#669999',
                        borderStyle: 'solid',
                        marginTop: 5,
                        marginBottom: 5
                    }
            }]
        
        }, {
            title: 'Hided Modules',
            id: 'hidedModulesPanel',
            bodyPadding: 10,
            rbar: ['->', {
                    xtype: 'button',
                    text: 'Show',
                    border: 5,
                    style: {
                        borderColor: '#669999',
                        borderStyle: 'solid',
                        marginTop: 5
                    }
            }, {
                
                    xtype: 'button',
                    text: 'Disable',
                    border: 5,
                    style: {
                        borderColor: '#669999',
                        borderStyle: 'solid',
                        marginTop: 5
                        
                    }
            }, {
                    xtype: 'button',
                    text: 'Remove',
                    border: 5,
                    style: {
                        borderColor: '#669999',
                        borderStyle: 'solid',
                        marginTop: 5,
                        marginBottom: 5
                    }
                    
            }]
        }]
});

